import SignaturePad from './signature_pad-3.0.0-beta.3'
// pages/signature/signature.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    Idnumber:'',
    signaturePad: null,//签名插件
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* 取出登录信息 操作唯一值为身份证            字符串*/
    let userInfo = wx.getStorageSync('userInfo');
    console.log(userInfo)
    // console.log(typeof(userInfo))

    /* 转 Json */
    // var jsonUserInfo = userInfo.replace(" ", "");

    // if (typeof jsonUserInfo != 'object') {
    //   jsonUserInfo = jsonUserInfo.replace(/\ufeff/g, "");//重点

    // var jj = JSON.parse(jsonUserInfo);

    // jsonUserInfo = jj;
    
    // }
    //偶发性 为空转JSON报错 未登录情况下 先判断是否为空
    // if(userInfo == ''){
    //   userInfo = {}
    // }
    //let UserInfo = JSON.parse(userInfo)

    // console.log(typeof(jsonUserInfo));
    // console.log(jsonUserInfo)


    //console.log(typeof(userInfo))//  string
    
      //转换
      let UserInfo = JSON.parse(userInfo)
      /* 转完之后 存值当前页面  */
      this.setData({
        Idnumber:UserInfo.Idnumber
      })
    

    //签名插件
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init.bind(this));
      
      //
  },
  //==================================签名功能调用
  init(res) {
    const width = res[0].width
    const height = res[0].height
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
    const signaturePad = new SignaturePad(canvas, {
      ratio: dpr,
      backgroundColor: 'rgb(255, 255, 255)'
    });
    this.setData({
      signaturePad: signaturePad
    })
  },
  handleTouchStart: function (e) {
    this.data.signaturePad._handleTouchStart(e)
  },
  handleTouchMove: function (e) {
    this.data.signaturePad._handleTouchMove(e)
  },
  handleTouchEnd: function (e) {
    this.data.signaturePad._handleTouchEnd(e)
  },
  //清除
  handleClear: function () {
    this.data.signaturePad.clear()
  },
  //改变颜色
  handleChangeColor: function () {
    const r = this.randColorVal();
    const g = this.randColorVal();
    const b = this.randColorVal();
    const color = `rgb(${r}, ${g}, ${b})`;
    this.data.signaturePad.penColor = color;
  },
  randColorVal: function () {
    return Math.round(Math.random() * 255);
  },
  //撤销
  handleCancel: function () {
    var data = this.data.signaturePad.toData();
    if (data) {
      data.pop();
      this.data.signaturePad.fromData(data);
    }
  },
  handleSave: function (e) {
    //console.log(e)
    const type = e.currentTarget.dataset.type
    const suffix = e.currentTarget.dataset.suffix
    if (this.data.signaturePad.isEmpty()) {
      //console.log(this.data.signaturePad.isEmpty()) 判断签名是否为空
      wx.showToast({
        title: '请先提供签名',
        icon: 'none'
      })
    } else {
      var dataURL = this.data.signaturePad.toDataURL(type);
      var save = wx.getFileSystemManager();
      var number = Math.random();
      save.writeFile({
        filePath: `${wx.env.USER_DATA_PATH}/pic${number}.${suffix}`,
        data: dataURL.slice(22),
        encoding: 'base64',
        success: res => {
          wx.saveImageToPhotosAlbum({
            filePath: `${wx.env.USER_DATA_PATH}/pic${number}.${suffix}`,//保存路径
            success: function (res) {
              wx.showToast({
                title: '保存成功',
              })
            }
          })
        }
      })
    }
  },

  //==================================

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.getSystemInfoSync().windowWidth   // 获取当前窗口的宽度
    wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
    console.log(wx.getSystemInfoSync().windowWidth)
    console.log(wx.getSystemInfoSync().windowHeight)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})